<template>
    <div class="vouchers">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            代金券列表
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="add-voucher">
                    <Row>
                        <Col :span="24" class="add-btn-box">
                            <div class="add-btn" @click="add">添加代金券</div>
                        </Col>
                    </Row>
                </div>

                

                <div class="table-box">
                    <el-table
                        ref="table"
                        :data="tableData"
                        size="mini"
                        style="width: 100%;min-width: 800px">
                        <!-- <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column> -->
                        <el-table-column
                            align="center"
                            prop="id"
                            label="ID">
                        </el-table-column>

                        <el-table-column
                            align="center"
                            prop="discount"
                            label="折扣值">
                        </el-table-column>

                        <el-table-column
                            prop="cash_rate"
                            align="center"
                            label="每日返现比例">
                        </el-table-column>

                        <el-table-column
                            prop="operator_id"
                            align="center"
                            label="操作人ID">
                        </el-table-column>

                        <el-table-column
                            prop="operator_name"
                            align="center"
                            label="操作人名称">
                        </el-table-column>

                        <el-table-column
                            prop="ip"
                            align="center"
                            label="操作IP地址">
                        </el-table-column>

                        <el-table-column
                            align="center"
                            prop="update_time"
                            label="上次更新时间">
                        </el-table-column>

                        <el-table-column
                            align="center"
                            prop="create_time"
                            label="创建时间">
                        </el-table-column>

                        <el-table-column
                            align="center"
                            label="是否启用">
                            <template slot-scope="scope">
                                <el-switch
                                    :value="scope.row.is_enable === '1'"
                                    active-color="#13ce66"
                                    inactive-color="#ddd"
                                    @change="openChange(scope.row,1)">
                                </el-switch>
                            </template>
                        </el-table-column>
                        
                        <!-- <el-table-column
                            align="center"
                            label="提现审核">
                            <template slot-scope="scope">
                                <p>{{scope.row.audit === 0 ? '未审核' : '已审核'}}</p>
                            </template>
                        </el-table-column> -->
                        
                        <!-- <el-table-column
                            label="操作"
                            align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="look(scope.row.userId)">查看详情</el-button>
                            </template>
                        </el-table-column> -->
                        <el-table-column
                            label="操作"
                            align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    
                </div>

                <div class="page-box">
                    <Page :total="total" :page-size="pageSize" show-elevator show-total @on-change="pageChange" />
                </div>

                <!-- 添加角色模态框 -->
                <el-dialog
                    :title="title"
                    :visible.sync="addVoucher"
                    width="40%"
                    :before-close="cancel">
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120" style="width: 60%;margin:auto">
                        <FormItem label="折扣值" prop="discount">
                            <Input style="width: 40px" v-model="formValidate.discount1" :maxlength="1" ></Input>.
                            <Input style="width: 40px" v-model="formValidate.discount2" :maxlength="1" ></Input>
                        </FormItem>

                        <FormItem label="每日返现比例" prop="cash_rate">
                            <Input v-model="formValidate.cash_rate" placeholder="请填写每日返现比例" ></Input>
                        </FormItem>

                        <FormItem label="是否启用">
                            <i-switch :value="formValidate.is_enable === '1' ? true : false" size="large" @on-change="openChange(formValidate,2)">
                                <span slot="open">启用</span>
                                <span slot="close">关闭</span>
                            </i-switch>
                        </FormItem>
                        <!-- <FormItem>
                            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                        </FormItem> -->
                    </Form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="submit" :loading="submitLoading">确 定</el-button>
                    </span>
                </el-dialog>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
	import store from "../../store/SessionStorageStore";
    import * as api from '@/api/api';
    import FileSaver from 'file-saver';
    import XLSX from 'xlsx';
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                userId: '',//用户账号/ID
                userName: '',//用户名称
                userIp: '',
                title: '编辑代金券',
                addVoucher: false,
                tableData: [],//表格数据
                formValidate: {
                    amount: '',
                    discount1: 0,
                    discount2: 0,
                    cash_rate: '',
                    is_enable: '0'
                },
                ruleValidate: {
                    discount1: [
                        { required: true, message: '请填写折扣值', trigger: 'blur' }
                    ],
                    discount2: [
                        { required: true, message: '请填写折扣值', trigger: 'blur' }
                    ],
                    cash_rate:[
                        { required: true, message: '请填写每日返现比例', trigger: 'blur' }
                    ]
                },
                submitLoading: false,
                total: 6,//数据总条数
                pageSize: 10,//每页显示条数
                current_page: 1,//当前页
            }
        },
        mounted(){
            this.getList();
        },

        computed: {
            
        },

        watch: {
            
        },
        
        methods: {
            pageChange(current_page) {
                this.current_page = current_page;
                this.getList();
            },
            current(i) {
                this.current_page = 1;
                this.getList()
            },
            getList() {
                let ip = returnCitySN.cip;
                let STORAGE_KEY = "Login";
                let userData = store.fetch(STORAGE_KEY);
                this.userId = userData.id;
                this.userIp = ip;
                let body = {
                    uid: userData.id,
                    ip: ip,
                    offset: this.current_page - 1,
                    limit: this.pageSize
                }
                api.getVouchersList(body).then((res) => {
                    if(res.data.code === 200) {
                        this.loading.isLoading = false;
                        this.tableData = res.data.data.data;
                        this.total = res.data.data.count * 1
                    }else {
                        this.$Notice.error({
                            title: '错误',
                            desc: res.data.msg
                        });
                    }
                }).catch(err => {
                    this.$Notice.error({
                        title: '错误',
                        desc: '服务器出错了'
                    });
                })
                
            },

            add() {
                this.title = '添加代金券'
                this.addVoucher = true;
            },
            
            edit(row) {
                this.title = '编辑代金券';
                this.addVoucher = true;
                this.formValidate.amount = row.amount;
                this.formValidate.discount1 = row.discount.split('.')[0];
                this.formValidate.discount2 = row.discount.split('.')[1];
                this.formValidate.cash_rate = row.cash_rate;
                this.formValidate.is_enable = row.is_enable;
                this.formValidate.id = row.id
            },

            openChange(row,type) {
                let old = row.is_enable;
                if(row.is_enable === '1'){
                    row.is_enable = '0'
                }else{
                    row.is_enable = '1'
                }
                if(type === 1) {
                    let body = {
                        id: row.id,
                        amount: row.amount,
                        cash_rate: row.cash_rate,
                        discount: row.discount,
                        is_enable: row.is_enable,
                        ip: this.userIp,
                        uid: this.userId
                    }
                    api.editVoucher(body).then(res => {
                        this.submitLoading = false;
                        if(res.data.code == 200) {
                            this.$Notice.success({
                                top: '150',
                                title: '提示',
                                desc: '恭喜你，修改成功！'
                            });
                            this.getList()
                        }else {
                            this.$Notice.error({
                                title: '错误',
                                desc: '修改失败！'
                            });
                            row.is_start = old;
                        }
                    }).catch(err => {
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器开小差了，请稍后再试！'
                        });
                    })
                }
            },

            cancel() {
                this.addVoucher = false;
                this.submitLoading = false;
                this.$refs.formValidate.resetFields();
                this.formValidate = {
                    amount: '',
                    discount: '',
                    cash_rate: '',
                    is_enable: '0'
                }
            },

            submit() {
                this.$refs.formValidate.validate((valid) => {
                    if (!valid) {
                        return false;
                    }else {
                        this.submitLoading = true;
                        if(this.title == '编辑代金券') {
                            let body = this.formValidate;
                            body.discount = body.discount1 + '.' + body.discount2;
                            body.uid = this.userId;
                            body.ip = this.userIp;
                            api.editVoucher(body).then(res => {
                                this.submitLoading = false;
                                if(res.data.code == 200) {
                                    this.$Notice.success({
                                        title: '提示',
                                        desc: '恭喜你，修改成功！'
                                    });
                                    this.cancel();
                                    this.getList()
                                }else {
                                    this.$Notice.error({
                                        title: '错误',
                                        desc: '修改失败！'
                                    });
                                    this.cancel();
                                }
                            }).catch(err => {
                                this.$Notice.error({
                                    title: '错误',
                                    desc: '服务器开小差了，请稍后再试！'
                                });
                            })
                        }else {
                            let body = {
                                amount: '100.00',
                                cash_rate: this.formValidate.cash_rate,
                                is_enable: this.formValidate.is_enable,
                                ip: this.userIp,
                                uid: this.userId
                            }
                            body.discount = this.formValidate.discount1 + '.' + this.formValidate.discount2;
                            api.setVoucher(body).then(res => {
                                if(res.data.code === 200){
                                    this.$Notice.success({
                                        title: '提示',
                                        desc: '恭喜你，添加成功！'
                                    });
                                    this.cancel();
                                    this.getList();
                                }else{
                                    this.$Notice.error({
                                        title: '错误',
                                        desc: '添加失败！'
                                    });
                                    this.cancel();
                                }
                            }).catch(err => {
                                this.$Notice.error({
                                    title: '错误',
                                    desc: '服务器开小差了，请稍后再试！'
                                });
                                this.cancel();
                            })
                        }
                    }
                })
                
            }
        }  
    }
</script>


<style lang="less">
    @import '../../assets/styles/constant.less';
    .vouchers{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        border-bottom: 1px solid #ddd;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .add-voucher{
                margin-top: 10px;
                .add-btn-box{
                    display: flex;
                    justify-content: flex-end;
                    .add-btn{
                        width: 100px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        background-color: #fff;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        color: #333;
                        cursor: pointer;
                    }
                }
            }
            .table-box{
                // margin-top: 10px;
                margin-top: 20px;
                width: 100%;
                .el-table th{
                    background-color: #eee;
                    color: #333;
                    font-size: 14px;
                }
                .el-button--text{
                    color: @greenColor;
                }
            }
            .page-box{
                height: 50px;
                line-height: 50px;
                display: flex;
                justify-content: flex-end;
                background-color: #fff;
                padding: 0 20px;
                
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>